<template>
  <div class="wrap">
    <div class="left">
      <!-- 侧边栏组件列表 -->
      <left-sidebar></left-sidebar>
    </div>

    <div class="designer-middle">
      <design-header></design-header>
      <a-form
        ref="formRef"
        :model="lowCode.model"
        class="demo-dynamic"
        :layout="lowCode!.globalConfig!.labelPosition"
        :size="lowCode!.globalConfig!.size"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
      >
        <draggable
          :key="lowCode.metaRefresh"
          class="drawing-board"
          v-model="(<Component>lowCode.root).items"
          @click="lowCode.currentKey = ''"
          @add="handleAdd($event)"
          v-bind="{ group: 'group', animation: 200 }"
          tag="div"
          :disabled="lowCode.disabled"
          item-key="key"
          handle=".mover"
          :component-data="{ name: 'fade' }"
        >
          <template #item="{ element, index }">
            <div>
              <renderParse
                :element="element"
                :key="element.key"
                :index="index"
                :parent="(<Component>lowCode.root)"
              >
              </renderParse>
            </div>
          </template>
        </draggable>
      </a-form>
    </div>

    <div class="right">
      <div>
        <!-- 右侧组件配置区 -->
        <setting></setting>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, provide, onBeforeMount, inject, ref } from "vue";
import { createLowCode } from "@/components/low-code/core/index";
import type {
  Component,
  ComponentImp,
  LowCodeImp,
} from "@/components/low-code/core/index";
import leftSidebar from "../../sidebar/index.vue";
import setting from "../../setting/index.vue";
import designHeader from "./header/index.vue";
import { tools } from "@/components/low-code/page-designer/utils";
import clone from "clone";
import { useComponentPretreatment } from "@/components/low-code/page-designer/hooks";
import { Cell } from "@/components/low-code/core/cell";

export default defineComponent({
  components: { leftSidebar, setting, designHeader },
  setup() {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const rootCompnent: Component = lowCode.dataCenter[
      lowCode!.root!.key
    ] as Component;

    const formRef = ref(null);
    lowCode.formController.setFormRefs("Root", formRef);

    let afterGetSchemas = new Map();
    provide("afterGetSchemas", afterGetSchemas);

    const handleAdd = (event: { newIndex: number }) => {
      const newIndex = event.newIndex;
      let hasKey = (<Component>(<Component>lowCode.root)).items[newIndex].key
        ? true
        : false;

      if ((<Component>lowCode.root).items[newIndex]) {
        /****
         * 组件预处理
         */
        useComponentPretreatment(lowCode, <Component>lowCode.root, newIndex);
        let cacheObject = rootCompnent.addItem(
          (<Component>lowCode.root).items[newIndex]
        ) as ComponentImp;
        cacheObject.nestedChain = "board";
        (<Component>lowCode.root).items[newIndex] = cacheObject;
        lowCode.setcurrentKey(cacheObject.key);
      }
      hasKey && lowCode.updateMetaRefresh();
      tools.handleStack.push(clone(lowCode));
    };

    const configInfo = computed(() => {
      return (
        lowCode &&
        lowCode?.dataCenter &&
        lowCode?.dataCenter[lowCode.currentKey]
      );
    });

    return {
      lowCode,
      handleAdd,
      configInfo,
      formRef
    };
  },
});
</script>

<style scoped>
.wrap {
  display: flex;
}

.left {
  width: 280px;
}

.designer-middle {
  position: relative;
  flex-grow: 1;
  border: 1px dashed #999;
  height: calc(100vh - 15px);
}

.right {
  width: 320px;
}

.drawing-board {
  padding-top: 48px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 15px);
}
</style>
